<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="swiper/swiper-3.3.1.min.css" />
		
		<style>
			*{
				margin:0;
				padding:0;
			}
			.swiper-container{
				width:100vw;
				height:100vh;
			}
			.swiper-container .swiper-wrapper .swiper-slide{
				height:100vh;
				width:100vw;
				font: bold 100px/100vh "微软雅黑";
				color:white;
			} 
			.swiper-container .swiper-wrapper .slide1{
				background: cadetblue;
			}
			.swiper-container .swiper-wrapper .slide2{
				background: coral;
			}
			.swiper-container .swiper-wrapper .slide3{
				background: blueviolet;
			}
			
			.swiper-container .swiper-pagination li{
				/*width:100px;
				height:100px;
				background: red;
				border-radius: 50%;*/
			}

		</style>
	</head>

	<body>
		<!--<div>
			<input type="button" value="第一个" />
			<input type="button" value="第二个" />
			<input type="button" value="第三个" />
		</div>-->
		<div class="swiper-container myContainer">
			<div class="swiper-wrapper">
				<div class="swiper-slide slide1">Slide 1</div>
				<div class="swiper-slide slide2">Slide 2</div>
				<div class="swiper-slide slide3">Slide 3</div>
				
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			

			<!-- 如果需要滚动条 -->
			<div class="swiper-scrollbar"></div>
		</div>

		<script src="swiper/jquery-1.10.1.min.js"></script>
		<script src="swiper/swiper-3.3.1.jquery.min.js"></script>
		<script>
			$(function(){
				var mySwiper = new Swiper('.myContainer', {
//					horizontal水平
					direction: 'horizontal',
					loop: true,//无缝滚动控制
					// 如果需要分页器
					pagination: '.swiper-pagination',
					// 如果需要滚动条
					scrollbar: '.swiper-scrollbar',
					//initialSlide :2,//初始化slide索引
					speed:300,//滑动时间
					autoplay : 1000,//时间间隔
					//autoplayDisableOnInteraction : false,//用户操作之后是否停止
					//freeMode : true,//抵抗反弹
//					effect : 'fade',
					//effect : 'cube',//立体旋转
//					effect : 'coverflow',
//					slidesPerView: 3,
//					centeredSlides: true,

					effect : 'flip',//旋转180度
					preventClicks : false,//划屏时碰到a连接是否跳转
//					paginationType : 'fraction',
					paginationElement : 'li',
				})
				$('div input').click(function(){
					var index = $(this).index();
					mySwiper.slideTo(index+1, 1000, false);
				})
			})
			
		</script>
	</body>

</html>